<template>
	<view class="qxlj_back4 contain">
		<!-- 头像 -->
		<view class="textareaBox">
			<view class=""><text>头像</text></view>
			<view class="imgBox">
				<view class="imgMenu" v-for="(item,index) in imgList" :key="index">
					<view class="renderImg">
						<image :src="item" mode="aspectFill" @click="previewImg(item)"></image>
					</view>
					<view class="deleteImg" @click="deleteImg(index)">
						<image src="../../static/yqimg/cl.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="imgMenu" @click="chooseImg()" v-if="imgList.length<1">
					<image style="width: 40rpx;height: 40rpx;" src="../../static/userimg/delat.png" mode="widthFix">
					</image>
				</view>
				<view class="note_head">上传照片不违反国家法律法规，300KB以内</view>
			</view>
		</view>

		<!-- 个人信息 -->
		<view class="con_top">
			<view class="con_name">
				<view class="left">
					<text>用户名：</text>
				</view>
				<view class="right">
					<u--input placeholder="请输入" border="none" v-model="name"></u--input>
				</view>
			</view>
			<view class="con_name">
				<view class="left">
					<text>性别：</text>
				</view>
				<view class="right" @click="sexShow=true">
					<text>{{sexValue}}</text>
					<u-picker @cancel='sexShow=false' @confirm="confirmSex()" :show="sexShow" :columns="columns"
						keyName="value"></u-picker>
				</view>
			</view>
			<view class="con_name con_tel">
				<view class="left">
					<text>生日：</text>
				</view>
				<view class="right" @click="showDay=true">
					<text>{{labalValue}}</text>
					<u-datetime-picker ref="datetimePicker" @cancel='showDay=false' @confirm="confirmDay()"
						:show="showDay" v-model="DayValue" mode="date" :minDate="minDate"></u-datetime-picker>
				</view>
			</view>
		</view>
		<view class="btn_box">
			<u-button @click="submit" shape="circle" text="修改"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		getUserinfoModify
	} from '@/api/qxlj.js';
	import Config from '@/config/index.js'
	export default {
		data() {
			return {
				imgList: [],
				name: '',
				briday: '',
				sexShow: false,
				columns: [
					[{
							value: '保密',
							ID: 0,
						},
						{
							value: '男',
							ID: 1,
						},
						{
							value: '女',
							ID: 2,
						}
					]
				],
				sexID: '0',
				sexValue: '保密',
				showDay: false,
				DayValue: Number(new Date()),
				minDate: Number(new Date('1940-01-01')),
				labalValue: this.formatter(new Date()),
			}
		},
		onLoad(option) {
			let data = JSON.parse(option.obj)
			this.name = data.Name;
			this.imgList.push(data.HeadImg);
			if(data.Birthday!=null){
				this.labalValue = this.formatter(data.Birthday);
			}
			this.sexID = data.Sex;
			if (this.sexID == 0) {
				this.sexValue = '保密'
			} else if (this.sexID == 1) {
				this.sexValue = '男'
			} else if (this.sexID == 2) {
				this.sexValue = '女'
			}
			console.log(this.imgList)
		},
		methods: {
			submit() {
				this.postData();
			},
			//提交数据
			async postData(e) {
				try {
					const {
						Data
					} = await getUserinfoModify({
						Name: this.name,
						Sex: this.sexID,
						HeadImg: this.imgList[0],
						Birthday: this.labalValue,
					});
					console.log(Data)
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						duration: 2000
					});
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			formatter(timestamp) {
				var date = new Date(timestamp);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				return Y + M + D;
			},
			chooseImg() { //上传照片
				let _this = this;
				if (_this.imgList.length < 1) {
					let num = 9 - _this.imgList.length;
					uni.chooseImage({
						count: num, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: function(res) {
							res.tempFilePaths.forEach((item) => {
								uni.uploadFile({
									url: Config.baseUrl + '/API/Users/PictureUpload',
									filePath: item,
									name: 'file',
									success: (uploadFileRes) => {
										let imgList = JSON.parse(uploadFileRes.data);
										_this.imgList = [..._this.imgList, imgList
											.picturePath
										];
									}
								});
							})

						}
					});
				} else {
					uni.showToast({
						title: '已达上限',
						icon: 'none',
						duration: 1000
					})
				}
			},
			//删除图片
			deleteImg(e) {
				this.imgList.forEach((item, index) => {
					if (e == index) {
						this.imgList.splice(index, 1);
					}
				})
			},
			previewImg(e) { //图片预览
				uni.previewImage({
					urls: [e],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//选择性别
			confirmSex(e) {
				this.sexID = e.value[0].ID;
				this.sexValue = e.value[0].value;
				this.sexShow = false;
			},
			//选择生日
			confirmDay(e) {
				this.labalValue = this.formatter(e.value);
				this.showDay = false;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		height: 100vh;
		padding: 4%;
	}


	.textareaBox {
		padding: 0 40rpx;
		border-bottom: 1rpx solid #f5f5f5;
		background-color: #fff;
		border-radius: 20rpx;

		text {
			height: 100rpx;
			line-height: 100rpx;
			color: #1A1A1A;
			font-weight: bold;
			font-size: 32rpx;
		}
	}

	.imgBox {
		width: 100%;

		.imgMenu {
			width: 145rpx;
			height: 140rpx;
			position: relative;
			background: #eee;
			display: flex;
			align-items: center;
			justify-content: center;

			.renderImg {
				width: 100%;
				height: 100%;
				border: 1rpx solid #f5f5f5;
				border-radius: 6rpx;
				overflow: hidden;
			}

			image {
				width: 100%;
				height: 100%;
			}

			.deleteImg {
				position: absolute;
				top: -20rpx;
				right: -10rpx;
				width: 50rpx;
				height: 50rpx;
				text-align: right;

				image {
					width: 25rpx;
					height: 25rpx;
				}
			}
		}

		.note_head {
			font-size: 26rpx;
			color: #CCCCCC;
			margin: 2% 0;
		}
	}

	.con_top {
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 2%;

		.con_name {
			padding: 0 20rpx;
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			color: #333333;
			border-bottom: 1px dashed #E6E6E6;
			font-size: 30rpx;

			.left {
				width: 30%;
			}

			.right {
				width: 70%;
			}
		}

		.con_tel {
			border-bottom: none;
		}
	}

	.btn_box {
		width: 80%;
		margin: 0 auto;
		margin-top: 5%;

		/deep/ .u-button {
			background-color: #498FFF;
			color: #fff;
			height: 96rpx !important;
		}

		/deep/ .u-button__text {
			font-size: 30rpx !important;
			font-weight: bold;
		}
	}
</style>